<template>
    <div id="app1">
        <div class="base-info">
            <div class="base-info-head">基本信息</div>
            <div class="base-info-content">
                <div class="base-info-content-show" id="showbase">
                    <ul>
                        <li>
                            <div class="content-show-l">用户昵称</div>
                            <div class="content-show-r">大西</div>
                        </li>
                        <li>
                            <div class="content-show-l">
                                <span>学</span>
                                <span>号</span>
                            </div>
                            <div class="content-show-r">209400228</div>
                        </li>
                        <li>
                            <div class="content-show-l">真实姓名</div>
                            <div class="content-show-r">大西</div>
                        </li>
                        <li>
                            <div class="content-show-l">
                                <span>性</span>
                                <span>别</span>
                            </div>
                            <div class="content-show-r">
<!--                                <img :src="user.sex === '男' ? '/image/male.png' : '/image/famale.png'">-->
                                <img src="/image/male.png">
                            </div>
                        </li>
                        <li>
                            <div class="content-show-l">
                                <span>年</span>
                                <span>级</span>
                            </div>
                            <div class="content-show-r">二年级</div>
                        </li>
                        <li>
                            <div class="content-show-l">
                                联系方式
                            </div>
                            <div class="content-show-r">159****5414</div>
                        </li>
                        <li>
                            <div class="content-show-l">
                                <span>年</span>
                                <span>龄</span>
                            </div>
                            <div class="content-show-r">未填写</div>
                        </li>
                        <li>
                            <div class="content-show-l">
                                家长姓名
                            </div>
                            <div class="content-show-r">未填写</div>
                        </li>
                        <li>
                            <div class="content-show-l">
                                家庭住址
                            </div>
                            <div class="content-show-r">未填写</div>
                        </li>
                        <li>
                            <div class="content-show-l">
                                <span>简</span>
                                <span>介</span>
                            </div>
                            <div class="content-show-r">未填写</div>
                        </li>
                    </ul>
                    <div data-v-60b18741="" class="edit-icon" id="editpersonal">
                        <a>
                            <EditOutlined />
                            <i data-v-60b18741="">
                            </i>编辑
                        </a>
                    </div>
                </div>
                <div class="base-info-content-edit" id="editbase" style="display: none">
                    <form class="el-form base-info-edit-form el-form--label-top el-form--inline">
                        <div class="el-form-item is-no-asterisk">
                            <label class="el-form-item_label">学号</label>
                            <div class="el-form-item_content">
                                <div class="el-input is-disabled">
                                    <input type="text" class="el-input_inner" disabled value="209400228">
                                </div>
                            </div>
                        </div>
                        <div class="el-form-item is-no-asterisk">
                            <label class="el-form-item_label" for="realName">真实姓名</label>
                            <div class="el-form-item_content">
                                <div class="el-input">
                                    <input type="text" class="el-input_inner" value="">
                                </div>
                            </div>
                        </div>
                        <div class="el-form-item edit-gender is-no-asterisk">
                            <label class="el-form-item_label" for="gender">性别</label>
                            <div class="el-form-item_content" style="display: flex">
                                <label role="radio" aria-checked="true" tabindex="0" class="el-radio is-bordered is-checked" id="male">
                                    <span class="el-radio__input is-checked" id="malespan"><span class="el-radio__inner"></span>
                                        <input type="radio" aria-hidden="true" tabindex="-1" class="el-radio__original" value="1"></span>
                                    <span class="el-radio__label">男</span>
                                </label>
                                <label role="radio" tabindex="0" class="el-radio is-bordered" id="female">
                                    <span class="el-radio__input" id="femalespan"><span class="el-radio__inner"></span>
                                        <input type="radio" aria-hidden="true" tabindex="-1" class="el-radio__original" value="2"></span>
                                    <span class="el-radio__label">女</span>
                                </label>
                            </div>
                        </div>
                        <div class="el-form-item is-no-asterisk">
                            <label class="el-form-item_label" for="gender">年级</label>
                            <div class="el-form-item_content">
                                <div class="el-input">
                                    <input type="text" class="el-input_inner" value="">
                                </div>
                            </div>
                        </div>
                        <div class="el-form-item is-no-asterisk">
                            <label class="el-form-item_label" for="gender">联系方式</label>
                            <div class="el-form-item_content">
                                <div class="el-input">
                                    <input type="text" class="el-input_inner" value="">
                                </div>
                            </div>
                        </div>
                        <div class="el-form-item is-no-asterisk">
                            <label class="el-form-item_label" for="gender">年龄</label>
                            <div class="el-form-item_content">
                                <div class="el-input">
                                    <input type="text" class="el-input_inner" value="">
                                </div>
                            </div>
                        </div>
                        <div class="el-form-item is-no-asterisk">
                            <label class="el-form-item_label" for="gender">家长姓名</label>
                            <div class="el-form-item_content">
                                <div class="el-input">
                                    <input type="text" class="el-input_inner" value="">
                                </div>
                            </div>
                        </div>
                        <div class="el-form-item is-no-asterisk">
                            <label class="el-form-item_label" for="gender">家庭住址</label>
                            <div class="el-form-item_content">
                                <div class="el-input">
                                    <input type="text" class="el-input_inner" value="">
                                </div>
                            </div>
                        </div>
                        <div class="el-form-item edit-intro is-no-asterisk">
                            <label class="el-form-item_label" for="gender">简介</label>
                            <div class="el-form-item_content">
                                <div class="el-textarea">
                                    <textarea placeholder="你很懒，还没有添加简介" maxlength="300" style="resize: none; min-height: 33px;" class="el-textarea_inner"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="el-form-item edit-btn is-no-asterisk">
                            <div class="el-form-item_content">
                                <button type="button" class="el-button edit-btn-cancel el-button--default el-button--small is-round"
                                 id="cancel">
                                    <span>取消</span>
                                </button>
                                <button type="button" class="el-button edit-btn-save el-button--primary el-button--small is-round"
                                @click="saveData" id="save">
                                    <span>保存</span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="base-info">
            <div class="base-info-head">教育信息</div>
            <div class="base-info-content">
                <div class="base-info-content-show" id="showbase1">
                    <ul>
                        <li>
                            <div class="content-show-l">学校名称</div>
                            <div class="content-show-r">杭州电子科技大学信息工程学院</div>
                        </li>
                        <li>
                            <div class="content-show-l">
                                <span>专</span>
                                <span>业</span>
                            </div>
                            <div class="content-show-r">软件工程</div>
                        </li>
                    </ul>
                    <div data-v-60b18741="" class="edit-icon" id="editpersonal1">
                        <a>
                            <EditOutlined />
                            <i data-v-60b18741="">
                            </i>编辑
                        </a>
                    </div>
                </div>
                <div class="base-info-content-edit" id="editbase1" style="display: none">
                    <form class="el-form base-info-edit-form el-form--label-top el-form--inline">
                        <div class="el-form-item is-no-asterisk">
                            <label class="el-form-item_label" for="realName">学校名称</label>
                            <div class="el-form-item_content">
                                <div class="el-input">
                                    <input type="text" class="el-input_inner" value="">
                                </div>
                            </div>
                        </div>
                        <div class="el-form-item is-no-asterisk">
                            <label class="el-form-item_label" for="gender">专业</label>
                            <div class="el-form-item_content">
                                <div class="el-input">
                                    <input type="text" class="el-input_inner" value="">
                                </div>
                            </div>
                        </div>
                        <div class="el-form-item edit-btn is-no-asterisk">
                            <div class="el-form-item_content">
                                <button type="button" class="el-button edit-btn-cancel el-button--default el-button--small is-round"
                                        id="cancel1">
                                    <span>取消</span>
                                </button>
                                <button type="button" class="el-button edit-btn-save el-button--primary el-button--small is-round"
                                        @click="saveData" id="save1">
                                    <span>保存</span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>


<script lang="ts">
    import {LeftCircleOutlined, RightCircleOutlined} from '@ant-design/icons-vue';
    import {defineComponent, onMounted} from 'vue';
    // import '../../public/js/personal.js';

    export default defineComponent({
        components: {
            LeftCircleOutlined,
            RightCircleOutlined,
        },

        setup() {

            const saveData = () => {

            };

            onMounted(() => {

            });

            return {
                saveData,
            }
        },
    });
</script>

<style scoped>

    .yangshi {
        display: none;
    }

    /deep/ .ant-col {
        width: 500px;
    }
    .base-info {
        width: 100%;
        background: #fff;
        margin-bottom: 10px;
    }

    .base-info .base-info-head {
        height: 48px;
        line-height: 48px;
        font-size: 18px;
        font-weight: 600;
        color: #2e2e2e;
        padding-left: 16px;
        border-bottom: 1px solid #f0f0f2;
    }

    .base-info .base-info-content {
        padding: 16px;
    }

    .base-info .base-info-content .base-info-content-show {
        cursor: pointer;
        padding: 16px 112px 16px 0;
        position: relative;
    }

    ul {
        border: 0;
        font-size: 100%;
        vertical-align: baseline;
        margin: 0;
        padding: 0;
        font-family: PingFang SC,Hiragino Sans GB,Arial,Microsoft YaHei,Verdana,Roboto,Noto,Helvetica Neue,sans-serif !important;
    }

    .base-info .base-info-content .base-info-content-show ul li .content-show-l {
        width: 56px;
        color: #555666;
        margin-right: 40px;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-left: 16px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .base-info .base-info-content .base-info-content-show ul li .content-show-r {
        color: #222226;
        word-break: break-all;
    }

    .base-info .base-info-content .base-info-content-show ul li {
        line-height: 24px;
        font-size: 14px;
        margin-bottom: 32px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    li {
        list-style: none;
    }

    span {
        border: 0;
        margin: 0;
        padding: 0;
    }

    .base-info .base-info-content .base-info-content-show ul li .content-show-r img {
        width: 24px;
        height: 24px;
        display: block;
    }

    .base-info .base-info-content .base-info-content-show:hover {
        background: #f8f8f8;
    }

    .base-info .base-info-content .base-info-content-edit {
        padding: 24px 40px;
        background: #f8f8f8;
    }

    .base-info .base-info-content .base-info-content-edit .base-info-edit-form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .base-info .base-info-content .base-info-content-edit .base-info-edit-form .el-form-item {
        width: 380px;
        margin-right: 0;
        margin-bottom: 24px;
    }

    .base-info .base-info-content .base-info-content-edit .base-info-edit-form .el-form-item .el-form-item_label {
        line-height: 16px;
        padding-bottom: 8px;
    }

    .el-form--inline.el-form--label-top .el-form-item_content {
        display: block;
    }

    .el-form-item_content {
        line-height: 40px;
        position: relative;
        font-size: 14px;
    }

    .el-input {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 100%;
    }

    .el-input.is-disabled .el-input_inner {
        background-color: #f5f7fa;
        border-color: #e4e7ed;
        color: #c0c4cc;
        cursor: not-allowed;
    }

    .el-input_inner {
        -webkit-appearance: none;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        border-top-color: rgb(220, 223, 230);
        border-right-color: rgb(220, 223, 230);
        border-bottom-color: rgb(220, 223, 230);
        border-left-color: rgb(220, 223, 230);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 40px;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        width: 100%;
    }

    .base-info .base-info-content .base-info-content-show .edit-icon {
        /*display: none;*/
        position: absolute;
        top: 16px;
        right: 16px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #1989fa;
        font-size: 14px;
    }

    .base-info .base-info-content .base-info-content-edit .base-info-edit-form .edit-btn {
        width: 100%;
        text-align: center;
        margin-bottom: 0;
    }

    .base-info .base-info-content .base-info-content-edit .base-info-edit-form .edit-btn .el-form-item_content {
        line-height: 32px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .base-info .base-info-content .base-info-content-edit .base-info-edit-form .edit-btn .el-form-item_content .edit-btn-cancel {
        color: #fc5531;
        border: 1px solid #fc5531;
    }

    .base-info .base-info-content .base-info-content-edit .base-info-edit-form .edit-btn .el-form-item_content button {
        padding: 5px 26px;
    }

    .el-button--small, .el-button--small.is-round {
        padding: 9px 15px;
    }

    .el-button.is-round {
        border-radius: 20px;
        padding: 12px 23px;
    }

    .el-button--small {
        font-size: 12px;
        border-radius: 3px;
    }

    .el-button {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #dcdfe6;
        color: #606266;
        -webkit-appearance: none;
        text-align: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        outline: 0;
        margin: 0;
        -webkit-transition: .1s;
        transition: .1s;
        font-weight: 500;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
    }

    .base-info .base-info-content .base-info-content-edit .base-info-edit-form .edit-btn .el-form-item_content .edit-btn-save {
        background-color: #fc5531;
        border-color: #fc5531;
        margin-left: 16px;
    }

    .el-button--primary {
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
    }

    .el-textarea {
        position: relative;
        display: inline-block;
        width: 100%;
        vertical-align: bottom;
        font-size: 14px;
    }

    .base-info .base-info-content .base-info-content-edit .base-info-edit-form .edit-intro textarea {
        height: 80px;
    }

    .el-textarea_inner {
        display: block;
        resize: vertical;
        padding: 5px 15px;
        line-height: 1.5;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        font-size: inherit;
        color: #606266;
        background-color: #fff;
        background-image: none;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    }

    .base-info .base-info-content .base-info-content-edit .base-info-edit-form .edit-intro {
        width: 100%;
    }

    .base-info .base-info-content .base-info-content-edit .base-info-edit-form .edit-gender .el-form-item_content .is-checked {
        background: #fff;
    }

    .base-info .base-info-content .base-info-content-edit .base-info-edit-form .edit-gender .el-form-item_content>label {
        width: 201px;
        text-align: center;
        margin-right: 17px;
    }

    .el-radio.is-bordered.is-checked {
        border-color: #409eff;
    }

    .el-radio.is-bordered {
        padding: 12px 20px 0 10px;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        height: 40px;
    }

    .el-radio {
        color: #606266;
        font-weight: 500;
        cursor: pointer;
        margin-right: 30px;
    }

    .base-info .base-info-content .base-info-content-edit .base-info-edit-form .edit-gender .el-form-item_content>label span.el-radio__input {
        display: none;
    }

    .el-radio__input {
        cursor: pointer;
        vertical-align: middle;
    }

    .el-radio, .el-radio__inner, .el-radio__input {
        position: relative;
        display: inline-block;
    }

    .el-radio, .el-radio__input {
        line-height: 1;
        white-space: nowrap;
        outline: 0;
    }

    .el-radio__input.is-checked .el-radio__inner {
        border-color: #409eff;
        background: #409eff;
    }

    .el-radio__inner {
        border: 1px solid #dcdfe6;
        border-radius: 100%;
        width: 14px;
        height: 14px;
        background-color: #fff;
        cursor: pointer;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .el-radio__original {
        opacity: 0;
        outline: 0;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
    }

    input, select, textarea {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    input {
        border: none;
    }

    .base-info .base-info-content .base-info-content-edit .base-info-edit-form .edit-gender .el-form-item_content>label .el-radio__label {
        line-height: 14px!important;
    }

    .el-radio__input.is-checked+.el-radio__label {
        color: #409eff;
    }

    .el-radio__label {
        font-size: 14px;
        padding-left: 10px;
    }
</style>